<template>
  <div class="footer">
    <div class="ft-content">
      <dl class="ft-info-col ft-info-intro">
        <dt>马蜂窝旅游网</dt>
        <dd>中国年轻一代用得更多的旅游网站</dd>
        <dd>
          上亿旅行者共同打造的
          <strong>"旅行神器"</strong>
        </dd>
        <dd>
          <strong>60,000</strong>
          多个全球旅游目的地
        </dd>
        <dd>
          <strong>600,000</strong>
          个细分目的地新玩法
        </dd>
        <dd>
          <strong>760,000,000</strong>
          次攻略下载
        </dd>
        <dd>
          <strong>38,000</strong>
          家旅游产品供应商
        </dd>
      </dl>
      <dl class="ft-info-col ft-info-about">
        <dt>关于我们</dt>
        <dd>
          <a href="">关于马蜂窝</a>&nbsp;&nbsp;
          <a href="">联系我们</a>
        </dd>
        <dd>
          <a href="">隐私政策</a>&nbsp;&nbsp;
          <a href="">商标说明</a>
        </dd>
        <dd><a href="">服务协议</a></dd>
        <dd>
          <a href="">商城平台服务协议</a>
        </dd>
        <dd><a href="">网络信息侵权通知指引</a></dd>
        <dd><a href="">马蜂窝旅游网服务监督员</a></dd>
        <dd>
          <a href="">网站地图</a>&nbsp;&nbsp;
          <a href="" class="mfw">加入马蜂窝</a>
        </dd>
      </dl>
      <dl class="ft-info-col ft-info-service">
        <dt>旅游服务</dt>
        <dd>
          <ul>
            <li>旅游攻略</li>
            <li>酒店预订</li>
            <li>旅游特价</li>
            <li>国际租车</li>
            <li>旅游问答</li>
            <li>旅游保险</li>
            <li>旅游指南</li>
            <li>订火车票</li>
            <li>旅游资讯</li>
            <li>APP下载</li>
            <li class="highlight">旅行商城全球商家入驻</li>
          </ul>
        </dd>
      </dl>
      <dl class="ft-info-col ft-info-qrcode">
        <dd class="ft-info-tejia">
          <span class="ft-qrcode-tejia">
            <img src="../../static/images/qr_saoma.png" alt="" class="qr_APP" />
          </span>
          <p>马蜂窝APP<br />扫码立即下载</p>
        </dd>
        <dd class="ft-info-tejia">
          <span class="ft-qrcode-tejia">
            <img src="../../static/images/qr_mfw4.gif" alt="" />
          </span>
          <p>马蜂窝旅游<br />订阅号</p>
        </dd>
        <dd class="ft-info-tejia">
          <span class="ft-qrcode-tejia">
            <img src="../../static/images/qr_tejia4.png" alt="" />
          </span>
          <p>马蜂窝良品<br />官方服务号</p>
        </dd>
      </dl>
      <dl class="ft-info-social">
        <dt>旅游之前，先上马蜂窝！</dt>
        <dd>
          <a href="">
            <i class="iconfont icon-weibo"></i>
          </a>
          <a href="">
            <i class="iconfont icon-xinlangweibo"></i>
          </a>
          <a href="">
            <i class="iconfont icon-QQkongjian"></i>
          </a>
        </dd>
      </dl>
    </div>
    <div class="ft-copyright">
      <a href="">
        <i class="ft-mfw-logo"></i>
      </a>
      <p>
        © 2021 Mafengwo.cn 京ICP备11015476号
        <img
          src="../../static/images/police_record.png"
          alt=""
          class="police"
        />
        京公网安备11010502013401号 京ICP证110318号
      </p>
      <p>
        网络出版服务许可证 增值电信业务经营许可证 营业执照
        广播电视节目制作经营许可证 网络文化许可证 网上有害信息举报专区 帮助中心
      </p>
      <p>
        违法和不良信息举报电话: 010-83416877 举报邮箱: mfwjubao@mafengwo.com
        涉未成年人不良信息专用举报邮箱: wcnrjubao@mafengwo.com
        全国旅游投诉电话：12301
      </p>
      <p>
        马蜂窝客服：国内<strong>4006-345-678</strong>&nbsp;&nbsp;海外<strong
          >+86-10-8341-6888</strong
        >
      </p>
    </div>
    <div class="ft-safety">
      <a href="" class="s-b"></a>
      <a href="" class="s-c"></a>
      <a href="" class="s-d"></a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Footer",
};
</script>
<style scoped>
.footer {
  width: 100%;
  height: 524px;
  /* margin-top: 30px; */
  color: #c2c2c2;
  background-color: #3c3c3c;
}
.ft-content {
  width: 1105px;
  height: 355px;
  padding-top: 20px;
  margin: 0 auto;
}
.ft-info-col {
  float: left;
  display: inline;
}
.ft-info-intro {
  width: 200px;
  line-height: 24px;
  margin-right: 68px;
}
.ft-info dt {
  height: 30px;
  font-size: 14px;
  overflow: hidden;
}
.ft-info-intro strong {
  color: #ff9d00;
  font-weight: normal;
}
.ft-info-about {
  line-height: 24px;
  margin-right: 85px;
}
.ft-info-about dd a {
  color: #c2c2c2;
}
.ft-info-about .mfw {
  color: #ff9d00;
}
.ft-info-service {
  line-height: 24px;
  width: 140px;
  margin-right: 80px;
}
.ft-info-service dt {
  text-align: center;
}
.ft-info-service ul {
  margin-right: -35px;
}
.ft-info-service li {
  float: left;
  width: 85px;
}
.ft-info-service .highlight {
  color: #ff9d00;
  width: 100%;
}
.ft-info-qrcode {
  width: 350px;
  display: flex;
  justify-content: space-between;
  float: right;
  padding-top: 22px;
  line-height: 1.4em;
}
.ft-info-qrcode span {
  display: block;
  height: 90px;
  margin: 0 0 8px 6px;
}
.ft-info-tejia {
  text-align: center;
  align-items: center;
}
.ft-info-tejia .qr_APP {
  width: 90px;
  height: 90px;
}
.ft-info-social {
  clear: both;
  text-align: center;
  padding-top: 25px;
  font-size: 16px;
}
.ft-info-social dd {
  padding: 5px 0;
}
.ft-info-social dd a i {
  display: inline-block;
  margin: 0 6px;
  font-size: 30px;
  color: #c2c2c2;
}
.ft-mfw-logo {
  float: left;
  margin: 2px 20px 0 0;
  width: 136px;
  height: 39px;
  background: url(../../static/images/mfw-footer-sprite7.png) no-repeat 0 -30px;
  overflow: hidden;
}
.ft-copyright {
  width: 1105px;
  padding: 12px 0 12px 7px;
  margin: 0 auto;
  border-top: 1px solid #575a5b;
  margin-top: -25px;
  line-height: 21px;
}
.ft-copyright p strong {
  color: #ff9d00;
}
.ft-copyright .police {
  width: 12px;
  height: 12px;
}
.ft-safety {
  width: 1105px;
  height: 37px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}
.ft-safety a {
  display: inline-block;
  margin-left: 10px;
  width: 90px;
  height: 30px;
  background: url(../../static/images/mfw-footer-sprite7.png) no-repeat 0 -70px;
  overflow: hidden;
}
.ft-safety .s-b {
  background-position: 0 -110px;
}
.ft-safety .s-c {
  background-position: 0 -70px;
}
.ft-safety .s-d {
  background-position: 0 -70px;
}
</style>